<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Diboot Admin UI</title>
</head>

<body>
  <div id="app">
    <style>
      body {
        margin: 0;
      }

      #content {
        letter-spacing: 2px;
        color: #909399;
        width: 100%;
        text-align: center;
      }

      .first-loading-wrapper {
        height: 100vh;
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .img1 {
        -webkit-animation: loadingDiboot 2s linear infinite both;
        animation: loadingDiboot 2s linear infinite both;
      }

      .img2 {
        -webkit-animation: loadingDiboot 2s linear 0.2s infinite both;
        animation: loadingDiboot 2s linear 0.2s infinite both;
      }

      .img3 {
        -webkit-animation: loadingDiboot 2s linear 0.4s infinite both;
        animation: loadingDiboot 2s linear 0.4s infinite both;
      }

      .img4 {
        -webkit-animation: loadingDiboot 2s linear 0.6s infinite both;
        animation: loadingDiboot 2s linear 0.6s infinite both;
      }

      .img5 {
        -webkit-animation: loadingDiboot 2s linear 0.8s infinite both;
        animation: loadingDiboot 2s linear 0.8s infinite both;
      }

      .img6 {
        -webkit-animation: loadingDiboot 2s linear 1s infinite both;
        animation: loadingDiboot 2s linear 1s infinite both;
      }

      @keyframes loadingDiboot {
        0% {
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }

        10% {
          -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
        }

        20% {
          -webkit-transform: translateY(0);
          transform: translateY(0);
        }
      }
    </style>
    <div class="first-loading-wrapper">
      <div>
        <img
          src=""
          alt="" class="img1">
        <img
          src=""
          alt="" class="img2">
        <img
          src=""
          alt="" class="img3">
        <img
          src=""
          alt="" class="img4">
        <img
          src=""
          alt="" class="img5">
        <img
          src=""
          alt="" class="img6">
      </div>
      <p id="content"></p>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    const list = [
      '如今我努力奔跑，不过是为了追上那个曾经被寄予厚望的自己',
      '成功的秘诀就是每天都比别人多努力一点',
      '别抱怨努力的苦，那是你去看世界的路',
      '当你在荒废时间，有多少人在拼命。别在最该奋斗的日子，选择了安逸',
      '再小的努力，乘以365都很明显',
      '专注你的梦想，做自己的英雄',
      '不要假装努力，结果不会陪你演戏',
      '喜欢就要争取，不行就要努力',
      '梦想不是空口无凭的大话，而是在寂静的奋斗里努力生长的果实',
      '努力把平凡的日子堆砌成伟大的人生',
      '努力不是为了得到更多 而是为了选择更多',
      '一日一钱，千日千钱，绳锯木断，水滴石穿',
      'Never give up, Never lose the opportunity to succeed',
      'Not everything that is faced can be changed, but nothing can be changed until it is faced.',
      'Sharp tools make good work.',
      'Never underestimate your power to change yourself.',
      'You have to believe in yourself . That`s the secret of success.',
      'The man who has made up his mind to win will never say "impossible"',
      'There will be no regret and sorrow if you fight with all your strength.',
      'Don`t let dream just be your dream.'
    ]
    const index = Math.floor(Math.random() * list.length)
    document.getElementById('content').innerText = list[index]
  </script>
</body>

</html>